<script>
  let isCheck = false;
  let books = ["Java", "C++", "Python"];
  let selectValue = "0";
  let selectChange = (e) => {
    console.log("on select change, e.target.value", e.target.value);
    console.log("select value: ", selectValue);
  };
</script>

<div>
  <h1>Checkbox Bind</h1>
  <input type="checkbox" bind:checked={isCheck} name="checkbox" />
  <p>{isCheck}</p>
  <!-- 分割线 -->
  <hr />
  <h1>复选框</h1>
  <input type="checkbox" bind:group={books} name="books" value="Java" />
  <input type="checkbox" bind:group={books} name="books" value="C++" />
  <input type="checkbox" bind:group={books} name="books" value="Python" />
  <p>{books}</p>
  <hr />
  <h1>单选框</h1>
  <input type="radio" bind:group={books} name="books" value="Java" />
  <input type="radio" bind:group={books} name="books" value="C++" />
  <input type="radio" bind:group={books} name="books" value="Python" />
  <hr />
  <h1>Select</h1>
  <select bind:value={selectValue} on:change={selectChange}>
    <option value="0">Java</option>
    <option value="1">C++</option>
    <option value="2">Python</option>
  </select>
  <p>{selectValue}</p>
</div>
